<template>
    <div class="center">
      <img class="logo" src="../assets/logo.png">
      <hello></hello>
      <p>
        Welcome to your Vue.js app!
      </p>
      <p>
        To get a better understanding of how this boilerplate works, check out
        <a href="http://vuejs-templates.github.io/webpack" target="_blank">its documentation</a>.
        It is also recommended to go through the docs for
        <a href="http://webpack.github.io/" target="_blank">Webpack</a> and
        <a href="http://vuejs.github.io/vue-loader/" target="_blank">vue-loader</a>.
        If you have any issues with the setup, please file an issue at this boilerplate's
        <a href="https://github.com/vuejs-templates/webpack" target="_blank">repository</a>.
      </p>
      <p>
        You may also want to checkout
        <a href="https://github.com/vuejs/vue-router/" target="_blank">vue-router</a> for routing and
        <a href="https://github.com/vuejs/vuex/" target="_blank">vuex</a> for state management.
      </p>
     
    </div>
    <backto-top></backto-top>
</template>
<style scoped>
  .center{
    text-align: center;
    background-color: rgba(33, 33, 33, 1);
    color:rgba(255,255,255,0.6);
    min-height:605px;
    padding:0 300px;
    font-size:22px;
  }
</style>
<script>
   import Hello from './Hello.vue'
   import { getCurrentUser } from '../vuex/getters'
    export default{
     vuex:{
       getters:{
         getCurrentUser,
       }
     },
      route:{
        canActivate(transition){
          transition.next()
        },
        activate({next}){
          console.log("follow by created,home.vue is loaded now")
          next();
        }
      },
        data(){
            return{
                msg:'hello vue'
            }
        },
        components:{
            Hello,
            'backtoTop':require('./backtoTop.vue')
        }
        ,
      created(){
        console.log("i am 'created' follow by canActivate");
      }
    }
</script>
